import React, {Component} from 'react';
import { View, Text,StyleSheet,Image } from 'react-native';
import {Icon,Flex} from 'antd-mobile-rn';
//https://github.com/jineshshah36/react-native-nav#examples
import NavBar, { NavGroup, NavButton, NavButtonText, NavTitle } from 'react-native-nav';
import theme from '../theme';

export default class Header extends Component {
    componentDidMount() {

    }

    //组件卸载
    componentWillUnmount() {

    }

    componentWillReceiveProps(nextProps) {
    }

    backRender=()=>{
        if(this.props.back)
        {
            //console.log("返回按钮显示");
            return(
             <Flex style={{width:55,flex:1,alignItems:"center",justifyContent:"center"}} onPress={() => this.props.navigation.goBack()}>
                {/* <Icon size="md" type="&#xe7fe;" color="white"/> */}
                {/* <Image resizeMode={"contain"}
                        source={require('../../static/imgs/left.png')}
                        style={{width:16,height:16}}
                        onLoad={() => {
                        }}
                    /> */}
                <Text style={{color:"white",fontSize:35,marginTop:-7}}>{"‹"}</Text>
             </Flex>
            )
        }
        return null;
    }

    render() {
        return (
            //<NavBar style={styles}>
                <Flex style={{flex:1,justifyContent:"space-between"}}>
                    <View style={{flex:1}}>
                        {this.backRender()}
                        {this.props.leftContent}
                    </View>
                    <View style={{flex:1,justifyContent:"center"}}>
                        <Text style={{color:"white",textAlign:"center",fontSize:18}}>{this.props.children}</Text>
                    </View>
                    <View style={{flex:1}}>
                        {this.props.rightContent}
                    </View>
                </Flex>
            //</NavBar>
            // <CnavBar
            //     mode="dark"
            //     icon={this.backRender()}
            //     leftContent={this.props.leftContent}
            //     rightContent={this.props.rightContent}
            //     style={{backgroundColor:'#fa2828',zIndex:5,top:0,width:'100%',height:'4rem',lineHeight:'4rem'}}
            // >{this.props.centerContent}</CnavBar>
        );
    }
    
}
const styles = StyleSheet.create({
    navBarContainer: {
       
    },
  statusBarIOS: {
    //backgroundColor: "red",
  },
  statusBarAndroid: {
    //backgroundColor: "red",
  },
  navBar: {
    backgroundColor: "rgb(250, 40, 40)"
  },
  navBarIOS: {
    //backgroundColor: "red",
  },
  navBarAndroid: {
    //backgroundColor: "red",
  },
  navBarButtonIOS: {
  },
  navBarButtonAndroid: {
  },
  navBarButtonText: {
    fontSize: 17,
    letterSpacing: 0.5,
    color: "#939393",
  },
  navBarTitleText: {
    fontSize: 17,
    letterSpacing: 0.5,
    color: "#626262",
    fontWeight: "500",
    textAlign: "center",
  },
  navGroup: {
    flexDirection: "row",
  },
  })
